<template>
	<view class="assetMain">

		<view class="tab-posi">
			<NewSegmentedControl :current="currentTab" :values="tabItems" style-type="text" active-color="#198a6c"
				@clickItem="onClickItem" />
		</view>

		<searchPopup :show="toShow" ref="toSearch" @clickFu="receive" />

		<view class="assetList">
			<view class="assetListItem" v-for="(item,index) in assetsList" :key="index">
				<view class="itemHead">
					<view class="itemHeadTitle">{{item.assetName?item.assetName:'--'}}</view>
					<view class="itemHeadState">
						{{item.statusCh?item.statusCh:'--'}}
					</view>
				</view>
				<view class="itemContent" @click="toRetrue(item.mainApplyId,item.assetApplyId)">
					<view class="conCenter">
						<view>申请编号：{{item.assetApplyNo}}</view>
						<view>资产编号：{{item.assetNo}}</view>
						<view>所在位置：{{item.applyUnitName?item.applyUnitName:'--'}}</view>
					</view>
					<view>
						<text class="iconfont">&#xe8d4;</text>
					</view>
				</view>
				<view class="itemHand">
					<view v-if="item.status=='2'" @click="toDel(item.assetApplyId)">删除申请</view>
				</view>
			</view>
			<!-- 加载结束 -->
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>


		<view class="bottom-btn">
			<button class="button btn-green" @click='scan'><text class="iconfont">&#xe617;</text> 退回资产</button>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup ref="positionPopup" background-color="#fff">
			<view class="scroll">
				<view class="popup-content" v-for="(item,index) in positionList"
					@click="positionChange(item.id,index,item.storeName)">
					<text class="text">{{item.storeName}}</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="statusPopup" background-color="#fff">
			<view class="popup-content" v-for="(item,index) in assetStatusOpts" @click="statusChange(index)"><text
					class="text">{{item.value}}</text></view>
		</uni-popup>
		<MessageTip ref="messageTip" :tipContent="'确认删除吗？'" @clickType="handleShowOrHideTip" />
	</view>
</template>

<script lang="ts">
	import {
		onPullDownRefresh,
		onReachBottom,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue'
	import {
		retrueData,
		delApply
	} from '@/common/api/assetAPI.ts'
	import {
		assetStatus,
		getPosition
	} from '@/common/api/comAPI.ts'
	import {
		CONSTANT
	} from '@/common/config/config.ts'
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts'
	import searchPopup from '@/pages/searchPopup/index.vue'
	import {
		isPermission
	} from '@/common/util/common.ts'

	export default defineComponent({
		components: {
			searchPopup,
		},
		setup(props, {
			emit
		}) {

			const showLoadMore = ref(false);
			const loadMoreText = ref('加载中……'); //加载更多提示
			const assetsList = ref([]); //资产列表数据
			const currentTab = ref(0)
			const tabItems = ref(["全部", "位置", "状态"]);
			const assetStatusOpts = ref([]);
			const statusPopup = ref(null); //状态弹出
			const messageTip = ref()
			const onClickItem = (e: any) => {
				currentTab.value = e.currentIndex;
				console.log('e.currentIndex', e.currentIndex)
				if (e.currentIndex === 0) {
					tabItems.value = ["全部", "位置", "状态"];
					searchParams.value.status = null;
					searchParams.value.assetName = null;
					searchParams.value.applyUnits = null
					getList();
				} else if (e.currentIndex === 1) {
					positionPopup.value.open('bottom')
				} else if (e.currentIndex === 2) {
					statusPopup.value.open('bottom')
				}
			}

			const toSearch = ref(null)
			// 搜索了列表
			function receive(e: any) {
				console.log(e)
				searchParams.value.assetName = e
				assetsList.value = []
				getList();
			}
			const toShow = ref(1)
			// 点击了搜索
			onNavigationBarButtonTap(() => {
				// 弹出搜索
				toShow.value++
			})

			const page = ref(CONSTANT.initPage); //初始加载页码
			const allPages = ref(0); //总页码数
			onPullDownRefresh(() => {
				console.log("触发下拉");
				// uni.startPullDownRefresh(); //下拉开启
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			});
			onReachBottom(() => {
				//触发底部
				if (page.value > allPages.value || page.value == allPages.value) {
					loadMoreText.value = '没有更多的数据了'
					showLoadMore.value = true;
				} else {
					page.value++;
					loadMoreText.value = '加载中……';
					showLoadMore.value = true;
					getList();
				}

			})
			//获取列表数据 
			const searchParams = ref({
				status: null,
				assetName: null,
				assetApplyType: 2,
				applyUnits: null
			}); //查询条件
			const matchRule = {
				status: 'eq',
				assetName: 'cn',
				assetApplyType: 'eq',
				applyUnits: 'eq'
			}; //匹配条件

			getList();
			getEmuns();

			function getList() {
				let config = {
					page: page.value,
					rows: CONSTANT.pageSize
				}
				console.log(searchParams.value)
				const params = Object.assign(fromSearch(searchParams.value, matchRule), config)
				if (!isPermission('ASS_IMP_LIST_QUERY')) {
					retrueData(params).then((res: any) => {
						uni.stopPullDownRefresh(); //关闭下拉
						if (res.code === 0) {
							allPages.value = res.data.pages;
							page.value = res.data.current;
							let list: any[] = res.data.records;
							assetsList.value = assetsList.value.concat(list);
							if (assetsList.value.length === 0) {
								showLoadMore.value = true;
								loadMoreText.value = '暂无数据'
							} else if (assetsList.value.length < CONSTANT.pageSize) {
								showLoadMore.value = true;
								loadMoreText.value = '没有更多的数据了'
							} else {
								showLoadMore.value = false;
							}
						}

					})
				}

			}
			//获取资产状态
			function getEmuns() {
				assetStatusOpts.value = [];
				assetStatus('ExecDtlStatus').then((res: any) => {
					// console.log(res)
					if (res.code === 0) {
						assetStatusOpts.value = res.data.ExecDtlStatus;
					}
				})
			}

			//----------------------------------------
			const positionList = ref([]); // 位置数据
			const positionPopup = ref(null); //位置弹出
			// 获取位置
			function getPos() {
				getPosition().then(value => {
					if (value.code == 0) {
						positionList.value = value.data.records
					} else {
						uni.showToast({
							title: '位置获取失败',
							icon: "none"
						});
					}
				})
			}
			getPos()
			// 位置改变
			function positionChange(id, index, storeName) {
				searchParams.value.applyUnits = id
				tabItems.value[currentTab.value] = storeName
				// tabItems.value[currentTab.value] = positionPopup.value[index].value;
				positionPopup.value.close();
				//获取列表
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			}
			//----------------------------------------

			function statusChange(i: Number) {
				searchParams.value.status = assetStatusOpts.value[i].code;
				statusPopup.value.close();
				tabItems.value[currentTab.value] = assetStatusOpts.value[i].value;
				// console.log(tabItems.value)
				//获取列表
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			}
			//扫码退回 
			function scan() {
				uni.navigateTo({
					url: `/pages/qrCode/qrCode?tip=扫码失败？返回资产列表&successUrl=/pages/assets/assetRetrue/qrRetrue&clickTipUrl=/pages/assets/assetManage/index`,
				})
			}

			// 删除
			const toDel = (assetApplyId) => {
				messageTip.value.openTip()
			}
			const handleShowOrHideTip = (type: string) => {
				if (type == 'yes') {
					delApply(assetApplyId).then(value => {
						if (value.code == 0) {
							uni.showToast({
								icon: "none",
								title: value.message
							})
						} else {
							uni.showToast({
								icon: "none",
								title: value.message
							})
						}
					})
				}
			}

			// 详情
			const toRetrue = (mainApplyId, assetApplyId) => {
				uni.navigateTo({
					url: `/pages/assets/assetRetrue/retrueDetail?mainApplyId=${mainApplyId}&assetApplyId=${assetApplyId}`
				})
			}
			return {
				showLoadMore,
				loadMoreText,
				assetsList,
				statusChange,
				searchParams,
				scan,
				currentTab,
				tabItems,
				onClickItem,
				positionChange,
				positionPopup,
				statusPopup,
				assetStatusOpts,
				toDel,
				toRetrue,
				messageTip,
				receive,
				toSearch,
				toShow,
				positionList,
				handleShowOrHideTip
			}
		},
	})
</script>

<style scoped lang="scss">
	.assetMain {
		background-color: #eee;
		font-size: 14px;
	}

	.assetNav {
		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-around;
		padding: 15px;
		background-color: #fff;
	}

	.assetList {
		padding: 30px 15px 80px 15px;
	}

	.itemHead {
		position: relative;
	}

	.assetListItem {
		margin-top: 15px;
		background-color: #fff;
		border-radius: 5px;
	}

	.itemHeadTitle {
		text-indent: 15px;
		height: 45px;
		line-height: 45px;
		background-color: aliceblue;
		font-weight: bold;
		color: #333;
	}

	.itemHeadState {
		position: absolute;
		right: 0;
		top: 10px;
		display: inline-block;
		background-color: burlywood;
		font-size: 11px;
		color: #fff;
		padding: 5px 12px;
		border-radius: 15px 0 0 15px;
	}

	.itemContent {
		box-sizing: border-box;
		font-size: 15px;
		padding: 15px 10px;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-wrap: row nowrap;
	}

	.itemContent>view:nth-child(1) {
		width: 85%;
		padding-left: 15px;
		color: #333;
	}

	.itemContent>view:nth-child(1)>view {
		padding: 3px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.itemContent>view:nth-child(2) {
		width: 15%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemHand {
		padding: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.itemHand>view {
		padding: 4px 23px;
		font-size: 12px;
		border-radius: 15px;
		border: 1px solid #369;
		color: #369;
		margin-right: 14px;
	}

	.bottom-btn {
		position: fixed;
		padding: 15px;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		background-color: #fff;
	}

	.toQR {
		display: inline-block;
		width: 50%;
		padding: 10px 20px;
		background-color: #2AA37D;
		border-radius: 20px;
		color: #fff;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.button {
		width: 60%;
	}
</style>
